<script setup>
import { defineProps } from 'vue'
import MarkdownIt from '@/utils/markdown-it'

const props = defineProps({
  content: String,
})

//markdown渲染
const md = MarkdownIt()
</script>

<template>
  <div class="markdown" v-html="md.render(props.content)"></div>
</template>

<style scoped>
.markdown {
  @apply text-[14px] sm:text-base;
}

.markdown :deep(.hljs) {
  @apply rounded-b;
}

.markdown :deep(.code-box) {
  @apply m-0 p-0;
}

.markdown :deep(.code-title) {
  @apply flex bg-gray-800 rounded-t p-1 text-gray-300;
}

.markdown :deep(.code-body) {
  @apply w-[100%] overflow-auto;
}

.markdown :deep(pre) {
  overflow-x: auto; /* 添加水平滚动条 */
  white-space: pre-wrap; /* 保持代码格式 */
  word-wrap: break-word; /* 防止长单词撑开 */
  max-width: 100%; /* 防止外部撑开 */
}
</style>
